<template>
  <div>
    <ZgDialog
      width="50%"
      top="10%"
      title="查看详情"
      :showFooter="false"
      v-model="showInfo">
      <Info :obj="infoObj"></Info>
    </ZgDialog>
    <ZgPage
      ref="page"
      :scrollX="1500"
      :pageOpt="pageOpt"
      :title="title"
      :addOpt="{width: '40%',top: '5%'}"
      :updateOpt="{width: '40%',top: '5%'}"
      :batchOpt="{width: '40%',top: '5%'}"
      :extraBtns="[
        { key: 1, name: '详情', icon: 'fa-search', isShow: obj => { return true } }
      ]"
      @extraBtn="onExtraBtn"
      @search="onSearch"
      @del="onDel"
      @add="onAdd"
      @update="onUpdate"
      @batch="onBatch"
      @sort="onSort"
      @resetCondition="onResetCondition"
      @searchWithCondition="onSearchWithCondition"
    >
      <template slot="columns">
        <a-table-column dataIndex="name" title="名称"></a-table-column>
        <a-table-column title="业务描述">
          <template slot-scope="text,record">
            <a-popover title="业务描述">
              <template slot="content">
                {{ record.describ }}
              </template>
              <a>{{ record.describ && record.describ.substring(0,4) }}...</a>
            </a-popover>
          </template>
        </a-table-column>
        <a-table-column title="流程事件类型">
          <template slot-scope="text,record">
            <ZgDicHolder parentCode="eventType" :code="record.eventType"></ZgDicHolder>
          </template>
        </a-table-column>
        <a-table-column title="调用方式">
          <template slot-scope="text,record">
            <ZgDicHolder parentCode="callMode" :code="record.callMode"></ZgDicHolder>
          </template>
        </a-table-column>
        <a-table-column dataIndex="callUri" title="调用地址"></a-table-column>
        <a-table-column title="是否异步">
          <template slot-scope="text,record">
            <a-tag v-if="record.isAsync" color="blue">是</a-tag>
            <a-tag v-else color="red">否</a-tag>
          </template>
        </a-table-column>
        <a-table-column title="业务逻辑类型">
          <template slot-scope="text,record">
            <ZgDicHolder parentCode="busiType" :code="record.busiType"></ZgDicHolder>
          </template>
        </a-table-column>
        <a-table-column title="是否启用">
          <template slot-scope="text,record">
            <a-tag v-if="record.isOpen" color="blue">是</a-tag>
            <a-tag v-else color="red">否</a-tag>
          </template>
        </a-table-column>
      </template>
      <template slot="add">
        <Add ref="add"></Add>
      </template>
      <template slot="update" slot-scope="scope">
        <Update ref="update" :jsonStr="scope.jsonStr"></Update>
      </template>
      <template slot="batch" slot-scope="scope">
        <Batch ref="batch" :ids="scope.ids"></Batch>
      </template>
      <template slot="sort" slot-scope="scope">
        <Sort ref="sort" :list="scope.list"></Sort>
      </template>
      <template slot="condition">
        <Condition ref="condition"></Condition>
      </template>
      <template slot="thMode" slot-scope="scope">
        <a-row :gutter="15">
          <a-col :span="4" v-for="(obj,i) in scope.list" :key="`obj${i}`">
            <a-card size="small">
              <div class="h200 scroll pd10" style="margin:-15px;">
                {{ obj }}
              </div>
            </a-card>
          </a-col>
        </a-row>
      </template>
    </ZgPage>
  </div>
</template>
<script>
import Add from './Add'
import Update from './Update'
import Batch from './Batch'
import Condition from './Condition'
import Info from './Info'
import Sort from './Sort'
import { dic } from './dic'
export default {
  components: {
    Add, Update, Batch, Condition, Info, Sort
  },
  data () {
    return {
      dic,
      title: '业务触点管理',
      showInfo: false,
      infoObj: null,
      pageOpt: {
        showConditionBtn: true,
        showBatchBtn: true,
        showBatchAddBtn: false,
        showHeaderConfig: true,
        showLayoutMode: false,
        showUpdateBtn: true,
        conditionHeight: 200,
        manageFilter: false
      }
    }
  },
  methods: {
    getOptLabel (opts, value) {
        const arr = opts.filter(t => {
            return t.value === value
        })
        if (arr.length > 0) {
            return arr[0].label
        } else {
            return ''
        }
    },
    onSearch (param) {
      this.$http.get('/zg-autoflow/flow/business/page', param, data => {
        this.$refs.page.endSearch(
          {
            total: parseInt(data.total),
            list: data.records.map(t => {
              t.key = t.id
              return t
            })
          }
        )
      })
    },
    onDel (ids) {
      this.$http.post('/zg-autoflow/flow/business/del', ids, () => {
        this.$refs.page.search()
      })
    },
    onAdd () {
      const result = this.$refs.add.save()
      if (!result.isOk) {
        this.$error({ title: result.msg })
        return
      }
      this.$http.post('/zg-autoflow/flow/business/add', result.data, () => {
        this.$refs.page.hideAdd()
        this.$refs.page.search()
      })
    },
    onUpdate () {
      const result = this.$refs.update.save()
      if (!result.isOk) {
        this.$error({ title: result.msg })
        return
      }
      this.$http.post('/zg-autoflow/flow/business/update', result.data, () => {
        this.$refs.page.hideUpdate()
        this.$refs.page.search()
      })
    },
    onBatch () {
      const result = this.$refs.batch.save()
      if (!result.isOk) {
        this.$error({ title: result.msg })
        return
      }
      this.$http.post('/zg-autoflow/flow/business/batch', result.data, () => {
        this.$refs.page.hideBatch()
        this.$refs.page.search()
      })
    },
    onSort () {
      const result = this.$refs.sort.save()
      if (!result.isOk) {
        this.$error({ title: result.msg })
        return
      }
      const sortStr = result.data.map(t => {
        return t.id + '_' + t.index
      }).join(',')
      this.$http.post('/zg-autoflow/flow/business/sort', sortStr, () => {
        this.$refs.page.hideSort()
        this.$refs.page.search()
      })
    },
    onResetCondition () {
      this.$refs.condition.reset()
    },
    onSearchWithCondition (param) {
      const condition = this.$refs.condition.getParam()
      this.$http.get('/zg-autoflow/flow/business/page', Object.assign({}, param, condition), data => {
        this.$refs.page.endSearch(
          {
            total: parseInt(data.total),
            list: data.records.map(t => {
              t.key = t.id
              return t
            })
          }
        )
      })
    },
    onExtraBtn (param) {
      if (param.key === 1) {
        this.infoObj = param.obj
        this.showInfo = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
